/**
 * 营养健康管理系统前端脚本
 */

// 等待DOM加载完成
document.addEventListener('DOMContentLoaded', function() {
    // 初始化导航栏响应式菜单
    initMobileMenu();
    
    // 初始化页面特定功能
    initPageSpecificFunctions();
    
    // 初始化表单验证
    initFormValidation();
});

/**
 * 初始化移动端导航菜单
 */
function initMobileMenu() {
    // 这里可以添加移动端菜单的展开/收起逻辑
    // 由于当前HTML中没有明确的移动端菜单按钮，这里先预留
    console.log('移动端菜单初始化完成');
}

/**
 * 根据当前页面路径初始化特定功能
 */
function initPageSpecificFunctions() {
    // 获取当前页面路径
    const path = window.location.pathname;
    
    // 根据路径判断当前页面
    if (path.includes('food-analysis.html')) {
        initFoodAnalysisPage();
    } else if (path.includes('health-profile.html')) {
        initHealthProfilePage();
    } else if (path.includes('diet-records.html')) {
        initDietRecordsPage();
    } else if (path.includes('login.html') || path.includes('register.html')) {
        initAuthPages();
    } else {
        // 首页或其他页面
        initHomePage();
    }
}

/**
 * 初始化首页功能
 */
function initHomePage() {
    console.log('首页功能初始化');
    
    // 示例：添加横幅图片加载失败的处理
    const bannerImg = document.querySelector('.md\\:w-1\\/2 img');
    if (bannerImg) {
        bannerImg.onerror = function() {
            this.src = 'images/default-banner.jpg';
            if (this.src.includes('default-banner.jpg')) {
                this.alt = '默认健康饮食图片';
                this.classList.add('img-placeholder');
                this.style.minHeight = '300px';
            }
        };
    }
}

/**
 * 初始化食品分析页面
 */
function initFoodAnalysisPage() {
    console.log('食品分析页面初始化');
    
    // 查找上传区域元素
    const uploadArea = document.querySelector('.upload-area');
    if (!uploadArea) return;
    
    // 文件上传处理
    uploadArea.addEventListener('click', function() {
        // 创建隐藏的文件输入
        const fileInput = document.createElement('input');
        fileInput.type = 'file';
        fileInput.accept = 'image/*';
        fileInput.style.display = 'none';
        
        // 监听文件选择
        fileInput.addEventListener('change', function(e) {
            if (e.target.files && e.target.files[0]) {
                handleImageUpload(e.target.files[0]);
            }
        });
        
        // 触发文件选择对话框
        document.body.appendChild(fileInput);
        fileInput.click();
        document.body.removeChild(fileInput);
    });
    
    // 拖放功能
    uploadArea.addEventListener('dragover', function(e) {
        e.preventDefault();
        this.classList.add('active');
    });
    
    uploadArea.addEventListener('dragleave', function() {
        this.classList.remove('active');
    });
    
    uploadArea.addEventListener('drop', function(e) {
        e.preventDefault();
        this.classList.remove('active');
        
        if (e.dataTransfer.files && e.dataTransfer.files[0]) {
            handleImageUpload(e.dataTransfer.files[0]);
        }
    });
}

/**
 * 处理图片上传
 * @param {File} file - 上传的图片文件
 */
function handleImageUpload(file) {
    // 显示加载状态
    showToast('正在分析图片...', 'info');
    
    // 这里应该是调用后端API进行图片分析
    // 由于这是前端演示，我们使用setTimeout模拟API调用
    setTimeout(function() {
        // 模拟分析结果
        const mockResult = {
            foodName: '苹果',
            calories: 52,
            protein: 0.3,
            fat: 0.2,
            carbs: 14,
            fiber: 2.4,
            vitamins: {
                'A': '2%',
                'C': '8%',
                'E': '1%'
            },
            minerals: {
                'Potassium': '107mg',
                'Calcium': '6mg'
            }
        };
        
        // 显示分析结果
        displayAnalysisResult(mockResult);
        
        // 显示成功消息
        showToast('食品分析完成！', 'success');
    }, 2000);
}

/**
 * 显示分析结果
 * @param {Object} result - 分析结果数据
 */
function displayAnalysisResult(result) {
    // 这里应该是将分析结果渲染到页面上
    console.log('分析结果:', result);
    
    // 由于食品分析页面尚未创建，这里只是记录结果
    // 实际实现时，应该将结果渲染到页面上的结果区域
}

/**
 * 初始化健康档案页面
 */
function initHealthProfilePage() {
    console.log('健康档案页面初始化');
    // 健康档案页面的特定功能初始化
}

/**
 * 初始化饮食记录页面
 */
function initDietRecordsPage() {
    console.log('饮食记录页面初始化');
    // 饮食记录页面的特定功能初始化
}

/**
 * 初始化登录/注册页面
 */
function initAuthPages() {
    console.log('认证页面初始化');
    // 登录/注册页面的特定功能初始化
}

/**
 * 初始化表单验证
 */
function initFormValidation() {
    // 获取所有表单
    const forms = document.querySelectorAll('form');
    
    forms.forEach(form => {
        form.addEventListener('submit', function(e) {
            // 阻止默认提交
            e.preventDefault();
            
            // 验证表单
            if (validateForm(this)) {
                // 表单验证通过，可以提交
                console.log('表单验证通过，准备提交');
                
                // 这里应该是调用后端API提交表单数据
                // 由于这是前端演示，我们使用模拟提交
                simulateFormSubmit(this);
            }
        });
    });
}

/**
 * 验证表单
 * @param {HTMLFormElement} form - 要验证的表单元素
 * @returns {boolean} - 验证是否通过
 */
function validateForm(form) {
    let isValid = true;
    
    // 获取所有必填字段
    const requiredFields = form.querySelectorAll('[required]');
    
    requiredFields.forEach(field => {
        if (!field.value.trim()) {
            isValid = false;
            // 添加错误样式
            field.classList.add('border-red-500');
            
            // 显示错误消息
            let errorMsg = field.dataset.errorMsg || '此字段不能为空';
            let errorElement = document.createElement('p');
            errorElement.className = 'text-red-500 text-sm mt-1';
            errorElement.textContent = errorMsg;
            
            // 移除已有的错误消息
            const existingError = field.parentNode.querySelector('.text-red-500');
            if (existingError) {
                field.parentNode.removeChild(existingError);
            }
            
            field.parentNode.appendChild(errorElement);
        } else {
            // 移除错误样式
            field.classList.remove('border-red-500');
            
            // 移除错误消息
            const errorElement = field.parentNode.querySelector('.text-red-500');
            if (errorElement) {
                field.parentNode.removeChild(errorElement);
            }
        }
    });
    
    return isValid;
}

/**
 * 模拟表单提交
 * @param {HTMLFormElement} form - 要提交的表单元素
 */
function simulateFormSubmit(form) {
    // 显示加载状态
    showToast('正在提交...', 'info');
    
    // 模拟API调用延迟
    setTimeout(function() {
        // 显示成功消息
        showToast('提交成功！', 'success');
        
        // 清空表单
        form.reset();
    }, 1500);
}

/**
 * 显示提示消息
 * @param {string} message - 消息内容
 * @param {string} type - 消息类型：success, error, info
 */
function showToast(message, type = 'info') {
    // 创建toast元素
    const toast = document.createElement('div');
    toast.className = `toast toast-${type}`;
    toast.textContent = message;
    
    // 添加到页面
    document.body.appendChild(toast);
    
    // 显示toast
    setTimeout(() => toast.classList.add('show'), 10);
    
    // 3秒后隐藏并移除
    setTimeout(() => {
        toast.classList.remove('show');
        setTimeout(() => document.body.removeChild(toast), 300);
    }, 3000);
}